<template>
  <view >
    <view class="time-line" v-for="(item,index) in data " :key="index">
      <div class="iconfont icon-jichuxinxi-shuaxin mr20 fontsize32 color-blue" @tap="restTime(index)" v-if="hasRest && index!==0"></div>
      <picker class="picker-input" mode="time" :value="item.start" start="00:00" end="23:59" @change="bindTimeChange(index,'start',$event)">
        <view class="uni-input">{{item.start}}</view>
      </picker>
      <div class="iconfont">-</div>
      <picker class="picker-input" mode="time" :value="item.end" start="00:00" end="23:59" @change="bindTimeChange(index,'end',$event)">
        <view class="uni-input">{{item.end}}</view>
      </picker>
	  <u-icon name='plus-circle' size="26px"  @tap="addTime()" v-if='hasAdd && index===0'></u-icon>
	  <u-icon name='minus-circle' size="26px"  @tap="removeTime(index)" v-if='hasAdd && index!==0'></u-icon>
    </view>
  </view>
</template>

<script>
export default {
  name: "dateTime",
  // 局部注册的组件
  components: {},
  props: {
    data: {
      type: Array,
      default: [{ start: '00:00', end: '00:00' },]
    },
    hasRest: {
      type: Boolean,
      default: false,
    },
    hasAdd: {
      type: Boolean,
      default: false,
    },
  },
  // 组件状态值
  data () {
    return {
    }
  },
  // 计算属性
  computed: {},
  onLoad () {
  },
  onShow () {
  },
  onHide () {
  },
  onUnload () {
  },
  // 组件方法
  methods: {
    restTime (index) {
      this.data[`${index}`] = { start: '00:00', end: '23:59', name: this.data[`${index}`].name || '' };
      this.$emit('bindTimeChange', this.data)
    },
    addTime () {
       let arrLength = this.data.length;
      if (arrLength >= 3) {
        wx.showToast({
          title: "最多支持三组时间数据",
          icon: "none",
          duration: 2000,
        });
        return;
      }
      this.data.push({ start: '00:00', end: '23:59' });
	  console.log('this.data',this.data)
      this.$emit('bindTimeChange', this.data,2)

    },
    removeTime (index) {
      this.data.splice(index, 1);
      this.$emit('bindTimeChange', this.data,2)
    },
    bindTimeChange (index, type, e) {
		
		
      let preTime = '00:00', lastTime = '00:00', arr = [];
      this.data[`${index}`][`${type}`] = e.target.value;
      this.data.map(item => {
        arr.push(item.start, item.end)
      });
      // start: pre index*2-1 cur index*2   last index*2+1
      // end:   pre index*2   cur index*2+1 last index*2+2
      preTime = type === 'start' ? '无' : type === 'start' ? arr[`${index * 2 - 1}`] : arr[`${index * 2}`];
      lastTime = (type === 'end' && index * 2 + 1 === arr.length - 1) ? '无' : type === 'start' ? arr[`${index * 2 + 1}`] : arr[`${index * 2 + 2}`];
       
	  this.$emit('bindTimeChange', this.data,2)
	  console.log('preTime, e.target.value', preTime, e.target.value,index)
	  // 注释 餐饮等行业起始时间不一定大于结束时间
      // this.verifierTimeLine(preTime, e.target.value, '无');// 填值时只需比较当前和之前的大小
    },
    verifierTimeLine (preTime, curTime, lastTime) {//单条时间段校验
      // console.log('单条时间段校验', preTime, curTime, lastTime)
      let curArr = curTime.split(":");
      let preArr = preTime === '无' ? [-1, -1] : preTime.split(":");//最前面的没有比较数据处理
      let lastArr = lastTime === '无' ? [curArr[0] + 1, curArr[1] + 1] : lastTime.split(":");//最后的没有比较数据处理
      // console.log('单条时间段校验', curArr, preArr, lastArr)
      let pre = Number(preArr[0] * 3600) + Number(preArr[1] * 60);//+ Number(preArr[2]);
      let cur = Number(curArr[0] * 3600) + Number(curArr[1] * 60);//+ Number(curArr[2]);
      let last = Number(lastArr[0] * 3600) + Number(lastArr[1] * 60);//+ Number(curArr[2]);
      if (!(pre < cur && cur < last)) {
        uni.showToast({
          title: "起始时间必须大于结束时间",
          icon: "none",
          duration: 2000,
        });
        return false;
      } else {
        return true;
      }

    },
  },
}
</script> 

<style lang='scss' scoped>
	/deep/.u-icon{
		margin:0 20rpx;
	}
.ml20 {
  margin-left: 20rpx;
}
.mr20 {
  margin-right: 20rpx;
}
.time-line {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-left: 80rpx;
  height: 68rpx;
  line-height: 44rpx;
}

.picker-input {
  width: 200rpx;
  border-radius: 48rpx;
  border: 2rpx solid #999999;
  height: 50rpx;
  line-height: 48rpx;
  text-align: center;
}
.fontsize32 {
  font-size: 32rpx;
}
.color-blue {
  color: #0078fe;
}
</style>
